@charset"utf-8";
@import"commom/rest";
$border-color: #dbdbdb;
$font-size:20px;
@function r($px) {
    @return $px/ $font-size * 1rem;
}

html,
body {
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    header {
        position: absolute;
        width: 100%;
        background: pink;
        top: 0;
        padding: r(22px) r(17px) r(24px);
        background: #b20000;
        .seach {
            border: 2px solid white;
            border-radius: 50%;
            width: r(42px);
            height: r(42px);
            text-align: center;
            line-height: r(40px);
            i {
                font-size: r(27px);
                color: white;
            }
        }
        .menu {
            i {
                font-size: r(42px);
                color: white;
            }
        }
        .logo {
            overflow: hidden;
            text-align: center;
            img {
                width: r(264px);
                height: r(39px);
            }
        }
    }
    section {
        width: 100%;
        position: absolute;
        top: r(89px);
        bottom: r(95px);
        -webkit-overflow-scrolling: touch;
        overflow: auto;
        .page_img {
            width: 100%;
            height: r(357px);
            overflow: hidden;
            position: relative;
            font-size: 0;
            img {
                width: 100%;
            }
            .mask {
                padding: r(24px) r(24px) 0 r(30px);
                position: absolute;
                bottom: r(-120px);
                left: 0;
                opacity: 0;
                background: rgba(0, 0, 0, .6);
                bottom: 0;
                height: r(120px);
                width: 100%;
                -webkit-transition: all 0.4s;
                -moz-transition: all 0.4s;
                transition: all 0.4s;
                color: #ffffff;
                h4 {
                    font-size: r(28px);
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
                .mast_box {
                    padding-bottom: r(21px);
                    line-height: r(42px);
                    .mask_left {
                        vertical-align: middle;
                        float: left;
                        i {
                            font-size: r(18px);
                            &:last-of-type {
                                margin-left: r(49px);
                            }
                        }
                        i:hover {
                            color: red;
                        }
                        span {
                            font-size: r(14px);
                        }
                    }
                    .span {
                        vertical-align: middle;
                        float: right;
                        font-size: r(18px);
                    }
                    ul {
                        vertical-align: middle;
                        width: 100%;
                        text-align: center;
                        li {
                            margin-left: r(12px);
                            vertical-align: middle;
                            display: inline-block;
                            width: r(11px);
                            height: r(11px);
                            background: $border-color;
                            border-radius: r(5px);
                        }
                    }
                }
            }
            &:hover {
                .mask {
                    opacity: 1;
                    bottom: 0;
                }
            }
        }
    }
    footer {
        width: 100%;
        position: absolute;
        bottom: 0;
        border-top: 1px solid #bbb9ba;
        background: #f5f5f5;
        ul {
            li {
                position: relative;
                float: left;
                width: 20%;
                text-align: center;
                padding-top: r(16px);
                padding-bottom: r(12px);
                &::after {
                    content: "";
                    display: block;
                    border-left: 1px solid #e8e8e8;
                    width: r(1px);
                    height: r(51px);
                    position: absolute;
                    left: 0;
                    top: r(22px);
                }
                i {
                    font-size: r(48px);
                    color: #8b8b8b;
                }
                h2 {
                    font-size: r(17px);
                    color: #8b8b8b;
                    margin-top: r(12px);
                }
                &[focl] {
                    a {
                        h2,
                        i {
                            color: #B20000 !important;
                        }
                    }
                }
            }
        }
    }
}